<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>标题</title>
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<link rel="stylesheet" href="http://js.jrjimg.cn/common/reset-min.css" />
	<style>
		body {
			color: #333333;
			font: 12px Arial,Helvetica,sans-serif,"宋体";
		}
		.clearfix { zoom:1; }
		.clearfix:after { content:""; display:block; clear:both; height:0; }

		.Ttai-list{  }
		.Ttai-list li{ width:77px;height:113px; float:left; margin:0 0 27px 17px;}
		.Ttai-list li img{ width:75px; height:113px; border:1px solid #00ccff;}

		#Ttai-show{width:420px;border-bottom:1px dotted #000;border-top:1px dotted #000;}
		#Ttai-show .viewport{
			position: relative;
			height:540px;
			width: 400px;
			overflow:hidden;
			margin: 23px 0px;
		}
		#Ttai-show .overview{
			 position: absolute;
			 left:0px;
			 top:0px;
			 overflow: hidden;
		}
		#Ttai-show .scrollbar{
			float:right;
			position: relative;
			width: 18px;
			height: 535px;
			margin-top: 23px;
			
		}
		#Ttai-show .track{
			position: relative;
			height: 535px;
			width:17px;
			background:#fff url(images/scrollbar.jpg) repeat-y scroll ;
		}
		#Ttai-show .thumb{
			position: absolute;
			left:5px;
			top:0px;
			width:5px;
			height:28px;
			border:1px solid #ccc;
			background-color:#fff;
			cursor:pointer;
		} 
	</style>
</head>
<body>
	<h2>Demo</h2>
	<div id="Ttai-show">
		<div class="scrollbar">
			<div class="track">
				<div class="thumb"></div>
			</div>
		</div>
		<div class="viewport">
			<div class="overview">
				<ul class="Ttai-list clearfix">
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
					<li><a href="#"><img src="images/img01.jpg"></a></li>
				</ul>
			</div>
		</div>
	</div>
	<script src="../../jquery/jquery-1.7.1.min.js"></script>
	<script src="jquery.tinyscrollbar.js"></script>
	<script>
		var oScroll = $('#Ttai-show')
		oScroll.tinyscrollbar({});
		oScroll.tinyscrollbar_update(420);
	</script>

	<h2>Info</h2>
	<div>
		<ul>
			<li>样式结构参照上面的demo</li>
			<li>tinyscrollbar_update方法可以定位容器的显示位置</li>
		</ul>
	</div>
</body>
</html>